<template>
  <div class="content">
    <!--    物料编码列表-->
    <el-dialog
      v-dialogDrag
      :title="$t('shop.fnumber1')"
      model
      :visible.sync="isoneMaterlDialog"
      :close-on-click-modal="false"
      width="60%"
      :before-close="handleClose"
    >
      <div class="materiel-form">
        <search :options="selectData" :msg="tacitly" @seek="collect" @hand="clientSearch" />
        <el-button class="btn" size="mini" type="primary" @click="clientSearch">{{ $t('btn.search') }}</el-button>
      </div>
      <div>
        <jc-table
          :table-data="tableData"
          :table-header="tableHeader"
          table-height="53vh"
          serial
          @clickRow="clientlSelectRow"
        />
      </div>
      <jc-pagination
        v-show="oneMater.total > 0"
        :total="oneMater.total"
        :page.sync="oneMater.pageNum"
        :limit.sync="oneMater.pageSize"
        @pagination="queryCustomerList"
      />
    </el-dialog>
  </div>
</template>
<script>
import { queryLargeTypeList } from '@/api/basicManagement/createMateriel'
import search from '@/components/Search'
import searData from '@/components/Search/mixin'
export default {
  components: {
    search
  },
  mixins: [searData],
  props: {
    msg: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      ftype: 2052,
      // 一级物料列表数据分页
      isoneMaterlDialog: true,
      oneMater: {
        total: 0, // 总条目
        pageNum: 1, // 当前页
        pageSize: 20 // 每页显示多少条数据
      },
      tableData: [],
      tableHeader: [
        { label: this.$t('shop.fnumber'), prop: 'fnumber' },
        { label: this.$t('shop.name1'), prop: 'fname' },
        { label: this.$t('market.connector'), prop: 'fconnector' }
      ],
      prodValue: { fcustId: '', fname: '', isclientlDialog: true }
    }
  },
  created() {
    this.queryCustomerList()
  },
  methods: {
    // 获取客户列表
    async queryCustomerList() {
      const DATA = {
        fid: this.msg,
        ...this.oneMater,
        search: this.searCollData
      }
      const { data: RES } = await queryLargeTypeList(DATA)
      this.tableData = RES.array
      this.oneMater.total = RES.total
    },
    // 客户弹窗选中
    clientlSelectRow(item) {
      this.$emit('oneMater', item)
    },
    clientSearch() {
      this.oneMater.pageNum = 1
      this.queryCustomerList()
    },
    // 关闭前回调
    handleClose() {
      this.$emit('oneMater', this.prodValue)
    }
  }
}
</script>

<style scoped lang="scss">
.content {
  @include listBom;
  .el-table {
    margin-top: 15px;
  }
  .materiel-form{
    position:relative;
    width: 100%;
    margin-bottom: 15px;
    .btn{
      transform: translateY(18%);
      margin-left: 450px !important;
    }
    .btn1 {
      margin-left: 15px !important;
    }
  }
}
</style>
